<template>
    <page-wrapper>
        <table-search @search="search(1)" @reset="reset()">
            <template #form>
                <form-item label="">
                    <a-input v-model:value="formState.name" placeholder="字典名称" />
                </form-item>
            </template>
            <template #extra>
                <a-space>
                    <a-button type="primary" @click="pickItem(null)"><plus-outlined />新增字典</a-button>
                    <a-button type="primary" danger :disabled="selectedRowKeys.length ? false : true"
                        @click="removeItem(null, remove, deleteMsg, 'id')"><delete-outlined />删除</a-button>
                </a-space>
            </template>
        </table-search>
        <a-table :columns="typeColumns" bordered :loading="loading" :dataSource="list" rowKey="id" :scroll="{ x: 800 }"
            :pagination="pagination" :row-selection="selection">
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'index'">
                    <span>{{ startLimit + index }}</span>
                </template>
                <template v-else-if="column.key === 'status'">
                    <a-switch v-model:checked="record.status" checked-children="开" un-checked-children="关" />
                </template>
                <template v-else-if="column.key === 'action'">
                    <a-space>
                        <a-button size="small" type="primary" block @click="pickItem(record)">编辑</a-button>
                        <a-button size="small" type="primary" block @click="showList(record)">列表</a-button>
                        <a-button size="small" type="primary" danger block
                            @click="removeItem(record, remove, deleteMsg, 'id')">删除</a-button>
                    </a-space>
                </template>
            </template>
        </a-table>

        <template v-if="showInfo">
            <ItemInfo :info="showItem" @cancel="close" @submit="search(1)" />
        </template>

        <template v-if="state.isShow">
            <ItemList :info="state.item" @cancel="state.isShow = false" @submit="state.isShow = false" />
        </template>

    </page-wrapper>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { useTable } from '@/hooks/use-table/index'
import { typeColumns } from './columns'
import { remoteList, remove } from '@/api/system/dict/type'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import ItemInfo from './components/info.vue'
import ItemList from './components/show-list.vue'
import { IDictType, IStateInfo } from './dict.type';

let deleteMsg = '确定要删除字典？'

const formState = reactive({
    name: '',
})
let {
    list,
    selectedRowKeys,
    startLimit,
    loading,
    showItem,
    showInfo,
    pagination,
    selection,
    search,
    reset,
    removeItem,
    pickItem,
    close
} = useTable(remoteList, formState, (res: any) => {
    console.log(res)
});
let state = reactive<IStateInfo>({
    isShow: false,
    item: null
})
//字典列表
const showList = (item: IDictType) => {
    state.item = item
    state.isShow = true
}
</script>